<template>
  <div class="homeBox">
    <el-container class="container">
      <el-aside :width="flag ? '64px' : '200px'">
        <nav-bar :isCollapse="flag"></nav-bar>
      </el-aside>
      <el-container>
        <el-header>
          <Header @fold="fold" :flag="flag"></Header>
        </el-header>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Header from '../../components/header/header.vue'
import NavBar from '../../components/navbar/NavBar.vue'
export default {
  data () {
    return {
      flag: false
    }
  },
  components: {
    Header,
    NavBar
  },
  methods: {
    fold () {
      this.flag = !this.flag
    }
  }
}
</script>

<style scoped lang="less">
.homeBox {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    height: 100%;
    .el-aside {
      background: rgba(0, 21, 41, 1);
    }
    .el-container {
      display: flex;
    }
  }
}
</style>
